<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>

<body>
<div id="user">

    <!--    内容-->
    <div style="color: black; font-size: 20px; margin: 10px 0">用户管理</div>
    <div style="height: 1px; background-color: white"></div>
    <el-input v-model="search" style="width: 20%;" suffix-icon="el-icon-search" placeholder="请输入名称按回车搜索"
              @keyup.enter.native="loadTable"></el-input>
    <el-button @click="add" type="primary" size="mini" style="margin: 10px 0">新增</el-button>
    <!--                <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button>-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                v-for="item in props"
                :prop="item.prop"
                :label="item.label"

        >
        </el-table-column>
        <el-table-column
                label="权限">
            <template slot-scope="scope">
                <el-select v-model="scope.row.roles" value-key="id" multiple placeholder="请选择"
                           @change="changeRole(scope.row)">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.nameZh"
                            :value="item">
                    </el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
<!--                <el-button @click="details(scope.row)" type="text">详情</el-button>-->
                <el-popconfirm
                        @onConfirm="del(scope.row.jobnum)"
                        title="确定删除？"
                >
                    <el-button type="text" slot="reference">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="background-color: white">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>

    <el-dialog title="详细信息" :visible.sync="dialogFormVisible" width="45%"
               close-on-click-modal="false" close-on-press-escape="false" show-close="false">
        <el-form ref="form" :model="entity"  label-width="100px" :inline="true">
            <el-form-item label="工号" prop="jobnum">
                <el-input v-model="entity.jobnum" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idcard">
                <el-input v-model="entity.doctor.idcard" :disabled="true"></el-input>
            </el-form-item>
            <el-row><el-form-item label="姓名" prop="name">
                <el-input v-model="entity.doctor.name" :disabled="true">
                </el-input>
            </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="entity.doctor.gender">
                        <el-option v-for="item in gender" :key="item.key" :label="item.value"
                                   :value="item.key" :disabled="true">
                        </el-option>
                    </el-select>
                </el-form-item></el-row>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="entity.doctor.age" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="民族" prop="nationality">
                <el-select v-model="entity.doctor.nationality">
                    <el-option v-for="item in nationality" :key="item.key" :label="item.value"
                               :value="item.key" :disabled="true">
                    </el-option>
                </el-select>
            </el-form-item>



        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</div>

</body>
<script src="../../js/vue.min.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/base.js"></script>

<script type="text/javascript">
    <!--    js内容 -->

    function user() {
        let urlBase = "/user";
        new Vue({
            el: "#user",
            data() {
                return {
                    user: {},
                    tableData: [],
                    pageNum: 1,
                    pageSize: 10,
                    total: 0,
                    dialogFormVisible: false,
                    entity: {},
                    isCollapse: false,
                    search: '',
                    options: [],
                    gender: [],
                    nationality: [],
                    tabledatatemp: [],
                    addForm: {
                        medicalRecordNumber: '',
                        idcard: '',
                        name: '',
                        gender: '',
                        age: 1,
                        nationality: '',
                        department: '',
                        bedNumber: '',
                        medicalHistory: '',
                        tansfusionHistory: '',
                        prengancy: '',
                        production: '',
                        territorial: '',
                        unit: '',

                    },
                    props: [{"label": "工号", "prop": "jobnum"}, {
                        "label": "姓名",
                        "prop": "doctor.name"
                    }, {"label": "身份证号", "prop": "doctor.name"},{"label": "性别", "prop": "doctor.gender"},{"label": "民族", "prop": "doctor.nationality"},{"label": "电话号", "prop": "doctor.phone"}]
                    // {"label":"账户锁定","prop":"isNoLocked"}
                }
            },
            created() {
                this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                // console.log(this.user);
                this.loadTable();

                // this.entity = this.tableData[0];
                // console.log(temp.data.records)
                // console.log(this.tableData)
                // console.log(this.total)

            },
            mounted() {
                // this.initpage();
            },
            methods: {
                // initpage() {
                //     $.ajax({
                //         url: "/user/getuser",
                //         type: type,
                //         contentType: "application/json",
                //         data: JSON.stringify(this.user)
                //     }).then(res => {
                //         console.log(this.user);
                //     })
                // },
                details(obj){
                    this.entity = obj;

                    console.log("this.entity");
                    console.log(this.entity);

                    this.dialogFormVisible = true;
                },
                changeRole(row) {
                    this.entity = row;
                    var returndata = {};//需要传回去原数据和新数据
                    returndata.a = this.tabledatatemp;
                    returndata.b = row;

                    $.ajax({
                        url: "/account/updateaccount",
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify(returndata)
                    }).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                message: "保存成功",
                                type: "success"
                            });
                            this.loadTable();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                        this.dialogFormVisible = false;
                    })
                },
                handleCollapse() {
                    this.isCollapse = !this.isCollapse;
                },

                loadTable() {
                    $.get("/account/getallaccount?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.search).then(res => {
                        // console.log(res)
                        this.tableData = res.data.records;
                        this.total = res.data.total;
                        this.entity = this.tableData[0];
                        this.tabledatatemp = JSON.parse(JSON.stringify(res.data.records));
                        console.log("usertable" + this.tableData)
                        console.log(this.tableData)

                    })

                    $.get("/role").then(res => {
                        this.options = res.data;
                        console.log(this.options)

                    })

                    // $.get("/datadictionary/getnationalities").then(res => {
                    //     this.nationality = res.data;
                    //     console.log(this.nationality)
                    //
                    // })
                    // $.get("/datadictionary/getgenders").then(res => {
                    //     this.gender = res.data;
                    //     console.log(this.gender)
                    //
                    // })
                },
                // exp() {
                //     window.open(urlBase + "/export");
                // },
                handleSizeChange(pageSize) {
                    this.pageSize = pageSize;
                    this.loadTable();
                },
                handleCurrentChange(pageNum) {
                    this.pageNum = pageNum;
                    this.loadTable();
                },
                add() {
                    this.entity = {};
                    this.dialogFormVisible = true;
                },
                save() {
                    let type = this.entity.id ? "PUT" : "POST";
                    $.ajax({
                        url: urlBase,
                        type: type,
                        contentType: "application/json",
                        data: JSON.stringify(this.entity)
                    }).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                message: "保存成功",
                                type: "success"
                            });
                            this.loadTable();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                        this.dialogFormVisible = false;
                    })
                },
                edit(obj) {
                    this.entity = obj;
                    console.log(obj);
                    // this.entity.role = {"id":1,"name":"超级管理员","description":null,"permission":null};
                    this.dialogFormVisible = true;
                },
                del(jobnum) {
                    $.ajax({
                        url: "/account/delete?jobnum=" + jobnum,
                        type: "POST"
                    }).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                message: res.msg,
                                type: "success"
                            })
                            this.loadTable();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                    })
                }
            }
        })

    }

    user();
</script>


</html>